<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>班级类别</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
</head>
<style>
    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-table-page {
        text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
         <div class="utable" style="width: 800px;" >
            <table class="layui-hide" id="table" lay-filter="table"></table>
         </div>

         <script id="toolbar" type="text/html">
             <div class="layui-btn-container">
                 <a lay-event="fh" onclick="javascript:history.back(-1);" href="#" style="text-decoration:none">
                     <i class="layui-icon"style="font-size: 20px">&#xe65c;</i>
                 </a>
                 <button lay-event="add" style="margin-left: 25px" class="layui-btn layui-btn-radius layui-btn-sm">新增</button>
             </div>
         </script>

        <script type="text/html" id="bar">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                <i class="layui-icon">&#xe640;</i>丢弃
            </a>
        </script>
 <script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
 <script th:src="@{/layui/layui.js}"></script>
 <script type="text/javascript" th:inline="none">
		layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: '#table'
                , id: 'table'
                , height: 520
                , width: 1150
                , url: '/system/classtypedate' //数据接口
                , page: true //开启分页
                , toolbar: '#toolbar'
                , cols: [[
                    {field: 'classtypeid', title: '编号', fixed: 'left', unresize: true, sort: true}
                    , {field: 'classtypename', title: '班级类别', edit: 'true'}
                    , {fixed: 'right', title: '操作', toolbar: '#bar'}
                ]]
            });

            layui.use('table', function () {
                var table = layui.table;

                //监听单元格编辑
                table.on('edit(table)', function (obj) {

                    var tr = obj.tr;
                    // 单元格编辑之前的值
                    var oldtext = $(tr).find("td[data-field='"+obj.field+"'] div").text();
                    var value = obj.value //得到修改后的值
                        , data = obj.data //得到所在行所有键值
                        , field = obj.field; //得到字段
                    // layer.msg(data.classtypename)
                    $.ajax({
                        url: '/system/classtypeupdate',
                        type: 'post',
                        data: {
                            classtypeid:data.classtypeid,
                            classtypename:data.classtypename
                        },
                        dataType: 'json',
                        success(data) {
                            if (data) {
                                parent.layer.msg('修改成功', {icon: 1});
                            }else {
                                obj.update({classtypename:oldtext})
                                layer.msg('班级类别名称重复不可修改', { icon: 5, time: 2000 });
                            }
                        }
                    })
                });

                //头工具栏事件
                table.on('toolbar(table)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'add':
                            var data = checkStatus.data;
                            // layer.alert(JSON.stringify(data));
                            //prompt层

                            layer.prompt({title: '班级类别名称', formType: 3}, function (name, index) {
                                layer.close(index);
                                // layer.msg('演示完毕！您的口令：'+'<br>您最后写下了：'+name);
                                $.ajax({
                                    url: '/system/classtypeadd',
                                    type: 'post',
                                    data: {
                                        classtypename: name
                                    },
                                    dataType: 'text',
                                    success(data) {
                                        if (data == 1) {
                                            parent.layer.msg('保存成功', {icon: 1});
                                            $('.layui-laypage-btn').click();
                                        } else {
                                            parent.layer.msg('有重复的存在', {icon: 2});
                                        }
                                    }
                                });
                            });
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            // layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    }
                    ;
                });

                //监听行工具事件
                table.on('tool(table)', function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                            $.ajax({
                                url: '/system/classtypedelete',
                                type: 'post',
                                data: {
                                    id: data.classtypeid
                                },
                                dataType: 'text',
                                success(data) {
                                    if (data == 1) {
                                        parent.layer.msg('删除成功', {icon: 1});
                                    } else {
                                        parent.layer.msg('出问题了', {icon: 2});
                                    }
                                }
                            });
                        });
                    }
                });
            });
        })
</script>
</body>
</html>